<template>
  <div>
    <el-drawer v-model="prop.drawer" title="员工列表" :with-header="true" @close="handelclose">
      <itable
      ref="ELTable"
      :table="tconfig.tableConfig"
      :tableData="tconfig.tableData"
      :page-bean="tconfig.pageBean"
      @pageChange="pageChange"
      @handleSelectionChange="handleSelectionChange"
      ></itable>
      <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确认</el-button>
      </div>
    </template>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, watch } from 'vue';
import itable from '@/components/table/table.vue'
import { PageBean } from "@/utils/page-bean";
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance()
const emit = defineEmits(['drawerClose','handleselect','confirmClick'])
const drawerflag = ref(false)
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(20, 1, 0),
})
const prop = defineProps({
  drawer:{
    type:Boolean,
    default:false
  },
  select_type:{
    type:String,
    default:'1'
  }
})
watch(()=>[prop.drawer],
  (val)=>{
    if(val[0]){
      getStaffList()
    }
    drawerflag.value = val[0]
  }
)
const ELTable = ref()
let selectRow = ref([])
const handleSelectionChange = (row) => {
  selectRow.value = row
  emit('handleselect',row)
}
const handelclose = () => {
  ELTable.value.toggleSelection()
  emit('drawerClose',false)
}
const pageChange = () => {

}
const confirmClick = () => {
  emit('confirmClick',selectRow.value)
  ELTable.value.toggleSelection()
  emit('drawerClose',false)
}
const cancelClick = () => {
  ELTable.value.toggleSelection()
  emit('drawerClose',false)
}
// 员工列表
const getStaffList = () => {
  tconfig.tableConfig.loading = true
  proxy.$api.getStaffselect({select_type:prop.select_type}).then(res => {
    tconfig.tableData = res.result
    tconfig.tableConfig.loading = false
  }).catch(err => {
    tconfig.tableConfig.loading = false
  })
}
const initTable = () => {
  tconfig.tableConfig = {
    loading: true,
    hasSelect: true,
    hasIndex: true,
    hasOperation: false,
    hasSearch: true,
    hasPage: false,
    headerShowBtn:false,
    tr: [
      {
        label: "员工名称",
        prop: "name",
      }
    ],
  }
}
initTable()
</script>

<style lang='scss' scoped>

</style>
